~{define "components/jielong_user_list"}~
<!-- 定义模板内容 -->
<style>
    #app .container .box-card {
        margin: 15px 0;
    }

    #app .container .box-card .jielong-content {
        width: 100%;
    }

    #app .container .box-card .jielong-content pre {
        margin: 0px;
        font-family: 微软雅黑;
        white-space: break-spaces;
        color: #666;
    }

    #app .container .box-card .jielong-list-item.add-content {
        background-color: #fff;
        border: 1px solid #d1d1d1;
    }

    #app .container .box-card .jielong-list-item.add-content .jielong-list-item-title-tool {
        cursor: pointer;
    }

    .jielong-list-item-title-tool span {
        margin: 0 5px;
        color: #999;
        /* cursor: pointer; */
    }

    #app .container .box-card .jielong-list-item.add-content input {
        display: inline;
        border: 0;
        width: 50%;
        font-size: 15px;
        color: #666;
        outline: none;
    }
</style>
<!-- 加载需要的组件 -->
~{template "components/jielong_user_list_style" .}~
<template id="template-jielong-user-list">
    <div class="jielong-info">
        <el-card class="box-card">
            <div style="font-size: 20px;margin-bottom: 10px;">填写情况</div>
            <div>
                由
                {{res.CreatorName}}
                ({{res.CreatorAccount}})
                发起接龙，填写接龙目前共 {{res.UsersCount}} 人
            </div>
        </el-card>
        <el-card class="box-card">
            <div style="font-size: 22px;font-weight: 600;color: #666;margin-bottom: 5px;">
                {{res.Theme}}
            </div>
            <div style="font-size: 14px; color: #999;">
                创建：{{$dateFormat(res.CreatedAt)}}
            </div>
            <div style="font-size: 14px; color: #999;">
                更新：{{$dateFormat(res.UpdatedAt)}}
            </div>
        </el-card>
        <el-card class="box-card" v-if="res.Content">
            <div class="jielong-content">
                <pre>{{res.Content}}</pre>
            </div>
        </el-card>
        <el-card class="box-card">
            <!-- 分页 -->
            <div class="center">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page.sync="pager.page" :page-size="pager.size" :hide-on-single-page="true" :pager-count="5"
                    :layout="pagerLayout" :total="pager.total">
                </el-pagination>
            </div>
            <!-- 列表 -->
            <div class="jielong-list-item" v-for="user in usersOfPage" :key="user.ID">
                <div class="jielong-list-item-title">
                    <span class="jielong-list-item-title-number">
                        {{user.num}}
                    </span>
                    <span class="jielong-list-item-title-name">
                        {{user.UserName}}({{user.UserAccount}})
                    </span>
                    <span class="jielong-list-item-title-auto">
                        {{user.Content}}
                    </span>
                    <span class="jielong-list-item-title-tool float-right" if="user.UserAccount === 'wang'">
                        <span class="time" v-if="!$isMobile()">
                            {{user.time}}
                        </span>
                        <!-- <span @click="onEdit(user.ID)">
                            <i class="el-icon-edit"></i>
                        </span> -->
                        <!-- <span @click="onDelete(user.ID)">
                            <i class="el-icon-delete"></i>
                        </span> -->
                    </span>
                </div>
            </div>
            <el-divider v-if="myItem.ID">我在# {{myItem.num}} #序号</el-divider>
            <el-empty v-if="res.UsersCount==0" description="你是第一个参与人" :image-size="100"></el-empty>
            <div class="jielong-list-item add-content" v-if="addItem.show">
                <div class="jielong-list-item-title">
                    <span class="jielong-list-item-title-number">{{addItem.num}}</span>
                    <span class="jielong-list-item-title-name">~{.username}~</span>
                    <span class="jielong-list-item-title-auto">
                        <input type="text" class="" v-model="addItem.content" maxlength="20"
                            placeholder="请输入内容...(可选)"></input>
                    </span>
                    <span class="jielong-list-item-title-tool float-right" @click="onCanel">
                        <i class="el-icon-close"></i>
                    </span>
                </div>
            </div>
            <div class="jielong-list-item add" v-else>
                <div class="jielong-list-item-title" @click="onStart" v-if="!myItem.ID">
                    <span class="jielong-list-item-title-number">
                        <i class="el-icon-circle-plus-outline"></i>
                    </span>
                    <span class="jielong-list-item-title-name">
                        <span type="text" class="link">接龙</span>
                    </span>
                </div>
                <div class="jielong-list-item-title" v-else>
                    <span @click="onStart">
                        <span class="jielong-list-item-title-number">
                            <i class="el-icon-edit"></i>
                        </span>
                        <span class="jielong-list-item-title-name">
                            <span type="text" class="link">我已接龙</span>
                        </span>
                        <span>
                            <!-- {{myItem.UserName}}
                            ({{myItem.UserAccount}}) -->
                            {{myItem.Content}}
                        </span>
                    </span>
                    <span @click="onDelete" class="jielong-list-item-title-number float-right">
                        <i class="el-icon-delete red"></i>
                    </span>
                </div>
            </div>
        </el-card>
        <div class="center" style="margin: 100px 0;">
            <el-button type="primary" class="full-width" @click="onSubmit" :loading="waiting">提交保存</el-button>
            <!-- <el-button>取消</el-button> -->
        </div>
        <!-- <p>{{ message }}</p>
        <p>{{ localMessage }}</p>
        <el-button type="danger" class="" @click="logMessage">Log Message</el-button> -->
    </div>
</template>
<script>
    // 定义组件
    Vue.component('jielong-user-list', {
        props: {
            jielongId: {
                type: Number,
                default: 0
            }
        },
        data: function () {
            return {
                waiting: false,
                pager: {
                    page: 1,
                    size: 10,
                    total: 0,
                },
                addItem: {
                    show: false,
                    num: 1,
                    content: ''
                },
                res: {
                    Theme: '接龙主题',
                    Content: '接龙说明',
                    CreatorAccount: 'zhangsan',
                    CreatorName: '张三',
                },
                users: [],
                usersOfPage: [],
                myItem: {}
            };
        },
        computed: {
            pagerLayout: function () {
                // console.log('isMobile', window.isMobile());
                return window.isMobile() ? 'prev, pager, next' : 'prev, pager, next, jumper';
            },
        },
        template: '#template-jielong-user-list',
        mounted() {
            this.loadData();
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.usersOfPage = paginate(this.users, val);
            },
            loadData: function () {
                // this.getJielonItem().then(() => {
                //     return this.getJielonUserList();
                // }).then(() => {
                //     this.$message.success('已加载接龙信息和列表')
                // });
                this.getJielonItemWithUsers().then(() => {
                    this.$message.success('已加载接龙信息和列表')
                });
            },
            getJielonItemWithUsers() {
                let url = '/jielong/api/ListItemWithUsers/' + this.jielongId;
                return fetchGet(url).then(res => {
                    console.log('ListItemWithUsers', res);
                    // 处理 Item
                    let Item = res.data.Item;
                    this.res = Item;
                    this.addItem.content = Item.Fill.toString();
                    this.addItem.num = zeropad(Item.UsersCount, Item.UsersCount + 1);
                    // 处理 Users
                    let Users = res.data.Users;
                    this.users = Users.map((item, index) => {
                        return {
                            ...item,
                            num: zeropad(Users.length, index + 1),
                            time: dateFormat(item.CreatedAt, 'MM-dd HH:mm:ss')
                        }
                    });
                    let me = this.users.find(item => item.UserAccount == '~{.user.Account}~');
                    if (me) {
                        this.myItem = me;
                        this.addItem.num = me.num;
                        this.addItem.content = me.Content;
                    }
                    // 根据总数计算页数
                    this.pager.total = this.users.length;
                    this.pager.page = Math.ceil(this.pager.total / this.pager.size);
                    // 显示最后一页，以便新接龙参考
                    this.handleCurrentChange(this.pager.page)
                })
            },
            // getJielonItem: function () {
            //     // console.log('jielongId', this.jielongId);
            //     let url = '/jielong/api/ListItem/' + this.jielongId;
            //     return fetchGet(url).then(res => {
            //         // console.log('item', res);
            //         this.res = res.data;
            //         this.addItem.content = res.data.Fill.toString();
            //         this.addItem.num = zeropad(res.data.UsersCount, res.data.UsersCount + 1);
            //     })
            // },
            // getJielonUserList: function () {
            //     // console.log('jielongId', this.jielongId);
            //     let url = '/jielong/api/ListUsers/' + this.jielongId;
            //     return fetchGet(url).then(res => {
            //         // console.log('ListUsers', res);
            //         this.users = res.data.map((item, index) => {
            //             return {
            //                 ...item,
            //                 num: zeropad(res.data.length, index + 1),
            //                 time: dateFormat(item.CreatedAt, 'MM-dd HH:mm:ss')
            //             }
            //         });
            //         let me = this.users.find(item => item.UserAccount == '~{.user.Account}~');
            //         if (me) {
            //             this.myItem = me;
            //             this.addItem.num = me.num;
            //             this.addItem.content = me.Content;
            //         }
            //         // 根据总数计算页数
            //         this.pager.total = this.users.length;
            //         this.pager.page = Math.ceil(this.pager.total / this.pager.size);
            //         // 显示最后一页，以便新接龙参考
            //         this.handleCurrentChange(this.pager.page)
            //     })
            // },
            onStart: function () {
                this.addItem.show = true
            },
            onCanel: function () {
                this.addItem.show = false
            },
            onSubmit: function () {
                if (!this.addItem.show) {
                    this.$message.warning('请先点击接龙');
                    return;
                }
                let dat = {
                    ListID: this.jielongId,
                    Content: this.addItem.content
                }
                let url = '/jielong/api/ListUserAdd';
                if (this.myItem.ID) {
                    dat = {
                        // ListID: this.jielongId,
                        Content: this.addItem.content,
                        ID: this.myItem.ID
                    }
                    url = '/jielong/api/ListUserUpdate';
                }
                this.waiting = true;
                fetchPost(url, dat).then(res => {
                    console.log('add', res);
                    // this.$message.success('提交成功');
                    this.addItem.show = false;
                    this.loadData();
                }).finally(() => {
                    this.waiting = false;
                });
            },
            onEdit: function () {
                console.log('onEdit', id);
            },
            onDelete: function () {
                // 此处不能用箭头函数，否则 this 不会指向 vue 实例
                /*
                    但是可以用这种形式
                    addJielong(done) {
                        window.location.href = '/jielong/page/add'
                    }
                */
                this.$confirm('确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    fetchGet('/jielong/api/ListUserDelete/' + this.myItem.ID).then(res => {
                        console.log('delete', res);
                        // this.$message.success('删除成功');
                        this.myItem = {};
                        this.loadData();
                    })
                }).catch(() => { })
                console.log('onDelete', this.myItem.ID);
            }
        }
    })
</script>
~{end}~